<template>
	<view class="content">
		<view class="page">
			<Plane v-show="actived=='plan'"></Plane>
			<Home v-show="actived=='home'"></Home>
			<My v-show="actived=='my'"></My>
		</view>
		<view class="bottom-bar">
			<view class="item">
				<view :class="{'actived':actived=='plan'}" @click="actived='plan'" class="icon">
					<image :src="icons.plane">
					</image>
				</view>
			</view>
			<view class="item">
				<view class="icon home" :class="{'actived':actived=='home'}" @click="actived='home'">
					<image src="../../static/logo.png"></image>
				</view>
			</view>
			<view class="item">
				<view class="icon" :class="{'actived':actived=='my'}" @click="actived='my'">
					<image :src="icons.my"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import icons from '../../js/common/svgs.js'
	import Plane from '../plane/plane.vue'
	import Home from '../home/home.vue'
	import My from '../my/my.vue'
	export default {
		components: {
			Plane,
			Home,
			My
		},
		data() {
			return {
				icons:icons,
				actived: 'plan'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.content {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.page {
			padding-bottom: 10px;
			flex: 1;
			height: 10px;
			width: 100%;
			box-sizing: border-box;
		}

		.bottom-bar {
			z-index: 9;
			background: #FFFFFF;
			border-top: 1px #eee solid;
			padding-top: 10px;
			padding-bottom: 6px;
			width: 100%;
			display: flex;
			margin: 10px;
			margin-top: 0px;

			.item {
				text-align: center;
				flex: 1;

				.icon {
					transition: all 0.14s linear;
					margin: 0 auto;
					width: 2.2rem;
					height: 2.2rem;

					image {
						margin: 0.4rem;
						filter: grayscale(80%);
						transition: all 0.14s linear;
						width: 1.4rem;
						height: 1.4rem;
						filter: #333;
					}
				}

				.icon.actived {
					background: rgba(0, 0, 0, 0);

					image {
						margin: 0;
						filter: grayscale(0%);
						width: 2.2rem;
						height: 2.2rem;
					}
				}


				
			}
		}
	}
</style>
